<template>
    <div>
        <el-dialog v-model="dialogVisible" width="80%" align-center :show-close="false" draggable destroy-on-close>
        <template #header="{ close }">
            <div class="dialog-header flex justify-between items-center">
                <div>{{ title }}</div>
                <el-icon class="el-icon--left cursor-pointer" @click="close">
                    <CircleCloseFilled color="#fff" />
                </el-icon>
            </div>
        </template>
        <div class="bg-white my-[10px]">
            <div class="p-[10px]">
                <el-form :model="snruleForm" label-width="130px" ref="snruleFormRef">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="规则类型" prop="type">
                                <CommonLabel :dataList="typeList" :value="snruleForm.type" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="项目性质" prop="projectClass">
                                <CommonLabel :dataList="projectClassList" :value="snruleForm.projectClass" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="适用范围" prop="applyrange">
                                <CustomTreeSelect v-model="snruleForm.applyrange" valueKey="id"
                                    labelKey="label" :isFetch="false" :dataList="ProjectTypeList" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="卡号规则设置" prop="expressionText">
                                <span>{{ snruleForm.expressionText }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <div class="operate-btns">
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
    </div>
</template>

<script setup>
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import CustomTreeSelect from "@/views/fee/components/CustomTreeSelect.vue";
import { ElMessage } from "element-plus";
import useCommonFetch from "@/hooks/useCommonFetch";
import { editsnrule } from "@/api/fee/rz/snrule/index.js";
import { assignObj } from "@/utils/main";
import { ref } from "vue";
const dialogVisible = ref(false);
const { proxy } = getCurrentInstance();
const typeList=[{code:"1",name:"经费卡号"},{code:"2",name:"项目编号"},{code:"3",name:"申报项目编号"}];
const projectClassList = useCommonFetch("项目性质");//项目性质
const ProjectTypeList_z = useCommonFetch("项目分类（纵向）");//纵
const ProjectTypeList_y= useCommonFetch("项目分类（横向）");//横
const ProjectTypeList_x = useCommonFetch("项目分类（校级）");//校级
const ProjectTypeList =ref([]);
const title = computed(() => {return "规则编辑";});
const snruleForm=reactive({
  id: "",
  type: "",
  projectClass:"",
  expressionText:"",
  applyrange:[],
});
const edit = async (row) => {
    dialogVisible.value = true;
    if(row.projectClass=='zXProject'){
        ProjectTypeList.value = ProjectTypeList_z.value;//纵
    }
    if(row.projectClass=='yfContract'){
        ProjectTypeList.value = ProjectTypeList_y.value;//横
    }
    if(row.projectClass=='xJProject'){
        ProjectTypeList.value = ProjectTypeList_x.value;//校级
    }
    assignObj(snruleForm, row);
    snruleForm.applyrange = row.applyrange.split(',');
   };

defineExpose({edit});
const emit = defineEmits(["save-success"]);


//点击保存
const save = async() => {
  try {
    let params = {id:snruleForm.id,applyrange:snruleForm.applyrange.join(',')}; 
    proxy.$modal.loading("请稍候...");
    const res = await editsnrule(params);
    proxy.$modal.closeLoading();
    if (res.code === 200) {
        ElMessage({ message: "操作成功！",type: "success",});
        dialogVisible.value = false;
        emit("save-success");
    }
  } catch (error) {
    proxy.$modal.closeLoading();
    console.log(error);
  }
};

</script>

<style scoped lang="scss">
@import url("@/views/fee/index.scss");
</style>